<template>
	<view>
		<view class="top-box">
			<image class="top-bg" src="https://syxiyi.oss-cn-shenzhen.aliyuncs.com/frontend/img/vip-top-bg.png"></image>
			<view class="top-text-box">
				<view>
					<image style="width: 120rpx;height: 120rpx;border-radius: 50%;" :src="userinfo.headimg"></image>
				</view>
				<view style="padding-left: 20rpx;">
					<view style="display: flex;align-items: center;">
						<view style="font-size: 36rpx;font-weight: 600;color: #A0471A;">{{userinfo.nickname}}</view>
						<view style="font-size: 20rpx;color: #A0471A;padding-left: 10rpx;">{{userinfo.level}}</view>
					</view>
					<view style="padding-top: 10rpx;color:  #A0471A;font-size: 26rpx;" v-if="userinfo.expire_time">
						{{userinfo.expire_time}}到期,购买后有效期将顺延
					</view>
					<view style="padding-top: 10rpx;color:  #A0471A;font-size: 26rpx;" v-else>
						还未开通会员
					</view>

				</view>
			</view>
		</view>

		<view class="cont-box">
			<view style="font-size: 36rpx;color: #323232;font-weight: 600;">选择会员套餐</view>
		</view>

		<view style="padding-left: 30rpx;">
			<scroll-view scroll-x>
				<view style="display: flex;align-items: center;">
					<view class="vip-list" v-for="(it,i) in vipArr" :key="i" @click="buy(it)">
						<image class="vip-bg" :style="{color: vipColor[it.id-1].color}" :src="base_domian + it.img"></image>
						<view class="vip-text-box">
							<view style="padding-top: 20rpx;padding-left: 34rpx;color: white;">
								{{it.name}} | <text @click.stop="quanyi(i)" style="padding-left: 10rpx;">查看会员权益</text>
							</view>
							<view style="display: flex;padding-left: 30rpx;padding-right: 30rpx;justify-content: space-between;align-items: center;margin-top: 20rpx;">
								<view style="color: white;">
									<view style="font-size: 30rpx;font-weight: 600;">￥<text style="font-size: 44rpx;">{{it.money}}</text> </view>
									<view style="font-size: 20rpx;color: white;">{{it.describe}}</view>
								</view>
								<view class="vip-but" v-if="it.id == 4" style="color: #B58262">{{it.expire_time ? '已开通' : '立即开通'}}</view>
								<view class="vip-but" v-else-if="it.id == 3" style="color: #1C0000">{{it.expire_time ? '已开通' : '立即开通'}}</view>
								<view class="vip-but" v-else-if="it.id == 2 || it.id == 1" style="color: #F24B00">{{it.total_num > 0 ? '已开通' : '立即开通'}}</view>
								<view class="vip-but" v-else style="color: #F24B00">{{it.expire_time > 0 ? '已开通' : '立即开通'}}</view>
							</view>
							<view class="vip-tips" v-if="!it.expire_time" :style="{color: vipColor[it.id-1].color}">暂未开通会员</view>
							<view class="vip-tips" v-if="it.expire_time" :style="{color: vipColor[it.id-1].color}">
								<view>已使用{{it.use_num}}件</view>
								<text>｜</text>
								<view >剩余{{it.total_num - it.use_num}}件<text v-if="it.expire_time">，{{it.expire_time}}到期</text></view>
							</view>
						</view>
						
					</view>
				</view>
			</scroll-view>
		</view>

		<view style="padding: 20rpx 30rpx 20rpx 30rpx;">
			<view style="font-weight: 600;font-size: 36rpx;font-weight: 600;color: #323232;">使用须知</view>
			<view style="padding-top: 20rpx;font-size: 30rpx;color: #53524B;">
				本卡仅限于洗衣用途，不能用于其它
			</view>
		</view>
		
		<uni-popup ref="popup" type="center" :maskClick="false">
			<view class="pop-box">
				<image class="pop-img" src="https://syxiyi.oss-cn-shenzhen.aliyuncs.com/frontend/img/vip_rule.png" mode=""></image>
				<view class="pop-cont">
					<scroll-view scroll-y="true">
						<view class="pop-qy">
							<view class="qy-dot"></view>
							<p v-html="vipArr[data_key].content"></p>
							<!-- <p v-html="pop_data"></p> -->
							<!-- <view class="qy-text">{{it.content}}</view> -->
						</view>
					</scroll-view>
				</view>
				<view class="close-box">
					<image @click="close" class="close-img" src="https://syxiyi.oss-cn-shenzhen.aliyuncs.com/frontend/img/close_pop.png" mode=""></image>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		components: {
			uniPopup
		},
		data() {
			return {
				show:true,
				imgUrl : 'https://syxiyi.oss-cn-shenzhen.aliyuncs.com/frontend/img/',
				vipColor: [
					{
						imgUrl: 'https://syxiyi.oss-cn-shenzhen.aliyuncs.com/frontend/img/yuekabg.png',
						color: '#FF9344'
					},
					{
						imgUrl: 'https://syxiyi.oss-cn-shenzhen.aliyuncs.com/frontend/img/yuekabg.png',
						color: '#FF9344'
					},
					{
						imgUrl: 'https://syxiyi.oss-cn-shenzhen.aliyuncs.com/frontend/img/studykabg.png',
						color: '#1C0000'
					},
					{
						imgUrl: 'https://syxiyi.oss-cn-shenzhen.aliyuncs.com/frontend/img/year_card.png',
						color: '#B58262'
					}
				],
				vipArr: [],
				qyList: [
					// {text: '月卡150元 | 季卡：450元 | 年卡：1800元'},
					// {text: '春夏季日洗2件衣服，床品一周一套（不包 含内衣裤等）秋冬季日洗3件衣服'},
					// {text: '本卡仅限于洗衣用途，不能用于其它'},
					// {text: '本卡购买后不可退换'}
				],
				userinfo: '',
				store_id: '',
				base_domian : this.baseDomian,
				pop_data : '',
				data_key : 2
			}
		},
		onLoad() {
			this.store_id = uni.getStorageSync('store_id')
			this.getVipQuanyi()
		},
		onShow() {
			this.getUserInfo()
			this.getTaocan()
		},
		methods:{
			// 		
			getUserInfo() {
				this.$ajaxRequest.get(this.baseUrl + 'user/info', {
					store_id: this.store_id
				}, true).then(res => {
					console.log(res)
					if (res.data.code == 200) {
						this.userinfo = res.data.data
					} else {
						uni.showToast({
							title:res.data.msg,
							icon: 'none'
						})
					}
				})
			},
			// 会员套餐列表
			getTaocan() {
				let that = this
				let arr = []
			 	this.$ajaxRequest.get(this.baseUrl + 'shop/recharge/card', {
					store_id: this.store_id
				}, true).then(res => {
					if (res.data.code == 200) {
						this.vipArr = res.data.data
					} else {
						uni.showToast({
							title:res.data.msg,
							icon:'none'
						})
					}
				})
			},
			// 会员权益
			getVipQuanyi() {
				this.$ajaxRequest.get(this.baseUrl + 'shop/explain/info', {}, false).then(res => {
					if (res.data.code == 200) {
						this.qyList = res.data.data
					} else {
						uni.showToast({
							title:res.data.msg,
							icon:'none'
						})
					}
				})
			},
			quanyi(data_key){
				this.data_key = data_key;
				this.$refs.popup.open()
			},
			buy(it) {
				uni.navigateTo({
					url:'/pages/vip/vipDetail/index?id=' + it.id
				})
			},
			close() {
				this.$refs.popup.close()
			}
		}
		
	}
</script>

<style>
	.vip-tips {
		position: absolute; 
		bottom: 25rpx; 
		display: flex;
		align-items: center;
		padding-top: 50rpx;
		justify-content: space-between;
		padding-left: 20rpx;
		padding-right: 20rpx;
		font-size: 20rpx;
	}
	.pop-box {
		position: relative;
	}
	
	.pop-img {
		width: 640rpx;
		height: 737rpx;
		/* height: 588rpx; */
	}
	.close-box {
		display: flex;
		justify-content: center;
		padding-top: 46rpx;
	}
	.close-img {
		width: 60rpx;
		height: 60rpx;
	}
	.pop-cont {
		position: absolute;
		top: 100rpx;
		left: 0;
		width: 100%;
		padding-left: 30rpx;
		padding-right: 20rpx;
		box-sizing: border-box;
	}
	.pop-qy {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 0rpx;
		border-bottom: 1rpx solid #FBF8F9;
	}
	.qy-dot {
		top: 20rpx;
		width:8rpx;
		height:8rpx;
		background:rgba(255,128,62,1);
		border-radius:50%;
		margin-right: 25rpx;
		transform: translateY(15rpx);
	}
	.qy-text {
		width: 556rpx;
		/* font-size: 30rpx; */
		color: #575757;
	}
	/* .pop-box{
		padding-top: 30rpx;
		position: relative;
		width: 640rpx;
		height: 588rpx;
	} */
	.vip-but {
		width: 160rpx;
		height: 60rpx;
		background: linear-gradient(90deg, rgba(245, 213, 153, 1) 0%, rgba(253, 209, 125, 1) 100%);
		border-radius: 30rpx;
		color: #F24A00;
		/* padding: 5rpx 20rpx 5rpx 20rpx; */
		text-align: center;
		line-height: 60rpx;
		font-size: 26rpx;
		font-weight: 700;
	}

	.vip-text-box {
		position: relative;
		width: 500rpx;
		height: 268rpx;
	}

	.vip-list {
		position: relative;
		margin-right: 20rpx;
		width: 500rpx;
		height: 268rpx;
	}

	.vip-bg {
		position: absolute;
		width: 500rpx;
		height: 268rpx;
	}

	.cont-box {
		padding: 20rpx 30rpx 20rpx 30rpx;
	}

	.top-box {
		position: relative;
		width: 750rpx;
		height: 322rpx;
	}

	.top-bg {
		position: absolute;
		width: 750rpx;
		height: 322rpx;
	}

	.top-text-box {
		display: flex;
		align-items: center;
		padding-top: 140rpx;
		padding-left: 58rpx;
		position: relative;
		z-index: 10;
	}
</style>
